<html>
<head>
	<title>document操作节点</title>
	<style>
		.a{color: red;}
	</style>
	<script>
		function removeN() {
			var p = document.getElementsByTagName("p")[0] ;
			p.parentNode.removeChild(p) ;
		}
		function addN() {
			var newP = document.createElement("p") ;
			var textN = document.createTextNode("Hello World!") ;
			newP.appendChild(textN) ;
			document.body.insertBefore(newP,document.getElementsByTagName("p")[0]) ;
		}
		function replaceN() {
			var oldP = document.getElementsByTagName("p")[0] ;
			var newP = document.createElement("p") ;
			var newTextNode = document.createTextNode("你好，DOM!") ;
			newP.appendChild(newTextNode) ;
			document.body.replaceChild(newP,oldP) ;
		}
		function viewAttri() {
			alert(document.getElementById("pid").getAttribute("id")) ;
		}
		function setAttri() {
			var p = document.getElementsByTagName("p")[2] ;
			p.setAttribute("class","a") ;
			alert(p.getAttribute("id")) ;
		}
		function addAttri() {
			var p = document.getElementsByTagName("p")[1] ;
			var attri = document.createAttribute("class") ;
			attri.value="a" ;
			p.setAttributeNode(attri) ;
			alert(p.getAttribute("id")) ;

		}
		function updateAttri() {
			var p =document.getElementById("prid") ;
			p.setAttribute("id","pd") ;
			alert(p.getAttribute("id")) ;
		}
		function deleteAttri() {
			var p = document.getElementById("pid") ;
			p.removeAttribute("class") ;
			///	alert(document.getElementById("prid")) ;
		}
	</script>
</head>
<body>
<p>Hello DOM!</p>
<input type="button" value="删除节点" onclick="removeN()" />
<input type="button" value="增加节点" onclick="addN()" />
<input type="button" value="替换节点" onclick="replaceN()" /><hr />
<p id="pid">viewAttribute</p>
<p>setAttribute</p>
<p id="prid">updateAttribute</p>
<input type="button" value="查看属性" onclick="viewAttri()" />
<input type="button" value="设置属性" onclick="setAttri()" />
<input type="button" value="增加属性"
	   onclick="addAttri()" />
<input type="button" value="修改属性"
	   onclick="updateAttri()" />
<input type="button" value="删除属性"
	   onclick="deleteAttri()" />
</body>
</html>